<div v-resize="resize" style="user-select: none;">
  <v-btn
    fixed
    right
    top
    fab
    color="primary"
    :style="{width:size+'px', height:size+'px', 'margin-right': width / 2 - Math.min(size*4, width/2) + 'px'}"
    @click="menu=!menu"
  >
    <v-icon :size="size * 0.7">menu</v-icon>
  </v-btn>
  <v-bottom-sheet v-model="menu">
    <v-card text style="margin: auto">
      <v-container fluid grid-list-md text-xs-center :style="{width:size * 8 + 'px'}">
        <v-layout row wrap style="padding-top: 2%;padding-bottom: 5%;">
          <v-flex xs12 style="display: flex;">
            <v-btn
              :color="mode == 'playground'?'primary':''"
              depressed
              style="text-transform:none; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%; flex: 1"
              @click="tap('playground')"
              :style="{height: size + 'px'}"
            >
              <v-icon :size="size * 0.8">games</v-icon>
            </v-btn>
            <v-btn
              :color="mode == 'algs'?'primary':''"
              depressed
              style="text-transform:none; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%; flex: 1"
              @click="tap('algs')"
              :style="{height: size + 'px'}"
            >
              <v-icon :size="size * 0.8">school</v-icon>
            </v-btn>
            <v-btn
              :color="mode == 'director'?'primary':''"
              depressed
              style="text-transform:none; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%; flex: 1"
              @click="tap('director')"
              :style="{height: size + 'px'}"
            >
              <v-icon :size="size * 0.8">movie</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
        <v-layout row wrap style="padding-bottom: 5%;">
          <v-flex xs3 class="text-center">
            <v-btn
              fab
              depressed
              @click="tap('code')"
              style="margin: 0%; padding: 0%;"
              :style="{width:size * 0.8+'px', height:size * 0.8+'px'}"
              color="primary"
            >
              <v-icon :size="size * 0.5">code</v-icon>
            </v-btn>
          </v-flex>
          <v-flex xs3 class="text-center">
            <v-btn
              fab
              depressed
              @click="resetd=true"
              style="margin: 0%; padding: 0%;"
              :style="{width:size * 0.8+'px', height:size * 0.8+'px'}"
              color="error"
            >
              <v-icon :size="size * 0.5">delete</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
  <v-dialog v-model="resetd" :width="size * 6">
    <v-card>
      <v-card-title style="text-transform:none;" class="headline">
        <div :style="{'font-size':size/2+'px','padding-top':size/8+'px'}">
          重置数据
        </div>
      </v-card-title>
      <v-card-actions>
        <v-layout row wrap style="margin: 0%;">
          <v-flex xs6 d-flex>
            <v-btn block color="red" text @click="resetd = false;reset();" :height="size">
              <div :style="{'font-size':size/3+'px'}">确定</div>
            </v-btn>
          </v-flex>
          <v-flex xs6 d-flex>
            <v-btn block color="black" text @click="resetd = false" :height="size">
              <div :style="{'font-size':size/3+'px'}">取消</div>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-card-actions>
    </v-card>
  </v-dialog>
</div>
